<template>
    <el-dialog title="添加头像" :visible.sync="addHeadImgBox" width="80%">
    	<el-container>
    	  <el-aside width="200px">
    		  <el-menu default-active="0" class="el-menu-vertical-demo">
    		  	<el-menu-item class="menuMsg" :index="index.toString()" @click="changeLeft(item.id)" v-for="(item,index) in classList" :key="index">
    		  		<div><span slot="title">{{item.name}}</span></div>
    		  		<el-dropdown>
    		  			<span class="el-dropdown-link">
    		  				{{item.images_count}}<i class="el-icon-arrow-down el-icon--right"></i>
    		  			</span>
    		  			<el-dropdown-menu slot="dropdown">
    		  				<el-dropdown-item>修改</el-dropdown-item>
    		  				<el-dropdown-item>删除</el-dropdown-item>
    		  			</el-dropdown-menu>
    		  		</el-dropdown>
    		  	</el-menu-item>
    		  	<el-menu-item class="asidePage">
    		  		<!-- 分页器区域 -->
    		  		<el-button size="mini">上一页</el-button>
    		  		<el-button size="mini">下一页</el-button>
    		  	</el-menu-item>
    		  </el-menu>
    	  </el-aside>
    	  <el-main>
    		  <el-row class="rowBox" :gutter="20">
    		    <el-col :span="4" v-for="(item,index) in imageList" :key="index" style="padding-bottom: 10px;">
    		      <el-card class="checkCart" :body-style="{ padding: '0px' }" shadow="hover">
    		      <el-image :src="item.url" @click="selectImage(item.url)"></el-image>
    		  	  <div class="imageName">{{item.name}}</div>
    		        <div style="padding: 14px;">
    		          <div class="bottom clearfix">
    		  			<el-button-group>
    		  			  <el-button class="btnGroup" size="mini" icon="el-icon-view"></el-button>
    		  			  <el-button class="btnGroup" size="mini" icon="el-icon-edit"></el-button>
    		  			  <el-button class="btnGroup" size="mini" icon="el-icon-delete"></el-button>
    		  			</el-button-group>
    		          </div>
    		        </div>
    		      </el-card>
    		    </el-col>
    		  </el-row>
    	  </el-main>
    	</el-container>
    </el-dialog>
</template>

<script>
export default {
    props:['addHeadImgBox'],
    components: {},
    data() {
        return {
			page: 1,
			cid: "", // 相册分类的id
			classList: [], // 相册分类的数据
			imageList: [], // 图片的数据
			avatar: "",
        };
    },
    created() {

    },
    mounted() {
		// 获取相册的分类数据
		this.getImageClass();
    },
    methods: {
		// 获取图片分类的数据
		getImageClass() {
			this.$axios.get(`/api/admin/imageclass/${this.page}`).then(res => {
				console.log(res);
				this.classList = res.data.list;
				this.cid = res.data.list[0].id;
				this.getImageList();
			}).catch(error => {
				this.$message.error(error.response.data.msg)
			})
		},
		// 点击左侧菜单栏进行切换图片
		changeLeft(id) {
			console.log(id);
			this.cid = id;
			this.page = 1;
			this.getImageList();
		},
		// 获取图片列表的数据
		getImageList() {
			this.$axios.get(
				`/api/admin/imageclass/${this.cid}/image/1`
			).then(res => {
				console.log(res);
				this.imageList = res.data.list;
			}).catch(error => {
				this.$message.error(error.response.data.msg)
			})
		},
		// 点击图片并选中
		selectImage(url) {
			// console.log(url)
			this.$emit("selectImage",url)
		},
		// editSelect(url) {
			
		// }
    },
    computed:{

    },
    watch:{

    }
};
</script>

<style lang="scss" scoped>
// 添加图片左侧区域布局
.el-aside {
	width: 100%;
	min-height: 500px;
	border: 1px solid #ddd;

	.el-menu {
		width: 100%;
		height: 572px;
		position: relative;
		border-right: none;
		.menuMsg {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.asidePage {
			width: 100%;
			background: #F0F0F0;
			position: absolute;
			bottom: 0px;
		}
	}
}
// 添加图片右侧区域布局
.el-main {
	width: 100%;
	.btnGroup {
		padding: 7px 10px !important;
	}
	.el-image {
		width: 100%;
		height: 130px;
	}
	.bottom {
		display: flex;
		justify-content: center;
	}
	.el-upload-dragger {
		width: 560px !important;
		height: 210px !important;
	}
	.imageName {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
		font-size: 13px;
	}
	.checkCart {
		position: relative;
		.checkBox {
			position: absolute;
			top: 0;
			right: 0;
		}
	}
}
.el-card.act {
	border: 1px solid #ff0000;
}
</style>

